<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/faq/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>FAQ - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../contribute">Contribute</a>
                </li>
            
            
            
                <li class="active">
                    <a href=".">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../contribute">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../about">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#frequently-asked-questions">Frequently Asked Questions</a></li>
        
            <li><a href="#is-jquery-required">Is JQuery required ?</a></li>
        
            <li><a href="#can-i-use-angular-gantt-without-angularjs">Can i use angular-gantt without angularJS ?</a></li>
        
            <li><a href="#what-are-the-dependencies">What are the dependencies ?</a></li>
        
            <li><a href="#which-browser-is-supported">Which browser is supported ?</a></li>
        
            <li><a href="#i-have-an-issue-with-date-calendar-andor-timezone">I have an issue with date, calendar and/or timezone ?</a></li>
        
            <li><a href="#how-can-i-set-first-day-of-week-and-first-week-of-year">How can i set first day of week and first week of year ?</a></li>
        
            <li><a href="#is-it-possible-to-print-the-gantt">Is it possible to print the gantt ?</a></li>
        
            <li><a href="#how-can-i-get-better-performance">How can I get better performance ?</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="frequently-asked-questions">Frequently Asked Questions</h1>
<ul>
<li>
<h3 id="is-jquery-required">Is JQuery required ?</h3>
<p>No.</p>
</li>
<li>
<h3 id="can-i-use-angular-gantt-without-angularjs">Can i use angular-gantt without angularJS ?</h3>
<p>No.</p>
</li>
<li>
<h3 id="what-are-the-dependencies">What are the dependencies ?</h3>
<ul>
<li><a href="https://angularjs.org">AngularJS</a> &gt;= 1.3</li>
<li><a href="https://github.com/urish/angular-moment">angular-moment</a> (<a href="http://momentjs.com/">momentJS</a> wrapper)</li>
</ul>
<p>Plugins may require additional dependencies:</p>
<ul>
<li><a href="https://github.com/ganarajpr/angular-dragdrop">angular-native-dragdrop</a> &gt;= 1.1.0 (<a href="../plugins/sortable">Sortable</a>)</li>
<li><a href="https://github.com/angular-ui-tree/angular-ui-tree">angular-ui-tree</a> (<a href="../plugins/tree">Tree</a>)</li>
<li><a href="https://github.com/marcj/css-element-queries">css-element-queries</a> (<a href="../plugins/resizeSensor">ResizeSensor</a>)</li>
<li><a href="https://github.com/jsplumb/jsplumb/">jsPlumb</a> &gt;= 2.2.0 (<a href="../plugins/dependencies">Dependencies</a>)</li>
</ul>
</li>
<li>
<h3 id="which-browser-is-supported">Which browser is supported ?</h3>
<p>Any up-to-date HTML5 browser should work properly.</p>
</li>
<li>
<h3 id="i-have-an-issue-with-date-calendar-andor-timezone">I have an issue with date, calendar and/or timezone ?</h3>
<p>angular-gantt use <a href="https://github.com/urish/angular-moment">angular-moment</a>, an angularJS wrapper for <a href="http://momentjs.com/">momentJS</a>. 
For any features related to date, like date formats, week numbering, custom calendars and timezone support, please
review those projects documentations.</p>
</li>
<li>
<h3 id="how-can-i-set-first-day-of-week-and-first-week-of-year">How can i set first day of week and first week of year ?</h3>
<p>Using <a href="http://momentjs.com/">momentJS</a> API.</p>
<pre><code>moment.locale('en', {
  week : {
    dow : 1, // Monday is the first day of the week.
    doy : 4 // The week that contains Jan 4th is the first week of the year.
  }
});
</code></pre>
</li>
<li>
<h3 id="is-it-possible-to-print-the-gantt">Is it possible to print the gantt ?</h3>
<p>One way to print the gantt is to use a headless browser like <a href="http://www.phantomjs.org">PhantomJS</a>. We prepared a 
sample rasterize script file which can be used to print the gantt either as pdf or image.</p>
<p>Usage: The sample script contains a small how-to. 
Download: <a href="https://github.com/angular-gantt/angular-gantt/blob/master/printing/phantomjs/rasterize.js">printing/phantomjs/rasterize.js</a></p>
</li>
<li>
<h3 id="how-can-i-get-better-performance">How can I get better performance ?</h3>
<p>Make sure that only the absolutely necessary data is loaded into the Gantt. This can be done by loading data for a limited time period (e.g. 6 months) and using the scroll events to load more tasks when the user is scrolling to the end of the active date range.
Additionally different view modes like the <code>view-scale='year'</code> or the column width setting <code>column-width=undefined</code> do display a big amount of data at the same time. If this is not necessary then switching to a lower view scale or disabling the automatic column width calculation is recommended.</p>
<p>When running in production we recommend to disable the Angular debug mode and to enable DI strict mode for an additional performance optimization. More about this can be found in the official AngularJS <a href="https://code.angularjs.org/1.3.14/docs/guide/production">documentation</a>.</p>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>